閱讀(7.5k) 書簽贊(0) 我要糾錯(cuò)

XHTML 語法規(guī)則

2021-12-06 13:49 更新

通過上節(jié)《XHTML 與 HTML 之間的差異》的學(xué)習(xí)，我們知道編寫 XHTML 代碼需要干凈的 HTML 語法，XHTML語法與HTML語法非常相似，幾乎所有有效的HTML元素在XHTML中都是有效的。但是當(dāng)你編寫一個(gè)XHTML文檔時(shí)，你需要特別注意使你的HTML文檔符合XHTML。下面w3cschool.cn帶大家深入學(xué)習(xí)XHTML的語法規(guī)則：

DOCTYPE聲明

所有的XHTML文檔在開始時(shí)都必須有一個(gè)DOCTYPE聲明。有三種類型的DOCTYPE聲明，在XHTML Doctypes一章中詳細(xì)討論。

這是一個(gè)使用DOCTYPE的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

區(qū)分大小寫

XHTML是區(qū)分大小寫的標(biāo)記語言。所有的XHTML標(biāo)簽和屬性都需要以小寫字母來寫。

<!-- 這在XHTML中是無效的 -->
<A Href="http://hgci.cn">w3cschool 在線教程</A>

<!-- 正確的XHTML寫法如下 -->
<a href="http://hgci.cn">w3cschool 在線教程</a>

在這個(gè)例子中，超鏈接Href和錨標(biāo)簽A不是小寫，所以這是不正確的。

關(guān)閉標(biāo)簽

每個(gè)XHTML標(biāo)簽都應(yīng)該有一個(gè)等效的結(jié)束標(biāo)簽，即使是空的元素也應(yīng)該有結(jié)束標(biāo)簽。

這里是一個(gè)例子，顯示使用標(biāo)簽的有效和無效的方式：

<!-- 這在XHTML中是無效的 -->
<p>這段不是按照XHTML語法編寫的。

<!-- 這在XHTML中也是無效的 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" >

以下語法顯示了在XHTML中編寫上述標(biāo)記的正確方法。不同的是，這里我們已經(jīng)關(guān)閉了兩個(gè)標(biāo)簽。

<!-- 這在XHTML中是有效的 -->
<p>這段是按照XHTML語法編寫的。</p>

<!-- 現(xiàn)在這也是有效的 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" />

屬性行情

XHTML屬性的所有值必須被引用。否則，你的XHTML文檔被認(rèn)為是一個(gè)無效的文檔。

這里是顯示語法的例子：

<!-- 這在XHTML中是無效的 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" width=228 height=60 />

<!-- 正確的XHTML寫法如下 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" width="228" height="60" />

簡寫屬性

XHTML不允許屬性簡寫。這意味著你需要明確說明屬性及其值。

以下示例顯示了差異：

<!-- 這在XHTML中是無效的 -->
<option selected>

<!-- 正確的XHTML寫法如下 -->
<option selected="selected">

下面是一個(gè) HTML 的簡寫屬性列表，以及在 XHTML 中的改寫：

HTML	XHTML
compact	compact="compact"
checked	checked="checked"
declare	declare="declare"
readonly	readonly="readonly"
disabled	disabled="disabled"
selected	selected="selected"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
multiple	multiple="multiple"
noresize	noresize="noresize"

ID屬性

id屬性取代了name屬性。而不是使用name =“name”，XHTML更喜歡使用id =“id”。

以下示例顯示了如何：

<!-- 這在XHTML中是無效的 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" name="w3cschool logo" />

<!-- 正確的XHTML寫法如下 -->
<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" id="w3cschool logo" />

語言屬性

腳本標(biāo)記的語言屬性已被棄用。以下示例顯示了這種差異:

<!-- 這在XHTML中是無效的 -->

<script language="JavaScript" type="text/JavaScript">
   document.write("w3cschool.cn編程教程");
</script>

<!-- 正確的XHTML寫法如下 -->

<script type="text/JavaScript">
   document.write("w3cschool.cn編程教程");
</script>

嵌套標(biāo)簽

您必須正確嵌套所有的XHTML標(biāo)簽。否則，您的文檔被認(rèn)為是不正確的XHTML文檔。

以下示例顯示了語法：

<!-- 這在XHTML中是無效的 -->
<b><i> 這個(gè)文本是粗體和斜體</b></i>

<!-- 正確的XHTML書寫方式如下 -->
<b><i> 這是粗體和斜體字。</i></b>

元素禁止

以下元素不允許其中有任何其他元素。這個(gè)禁止適用于所有的嵌套深度。意思是，它包括所有的降序元素。

元件	禁令
<a>	不得包含其他<a>元素。
<pre>	不得包含<img>，<object>，<big>，<small>，<sub>或<sup>元素。
<button>	不得包含<input>，<select>，<textarea>，<label>，<button>，<form>，<fieldset>，<iframe>或<isindex>元素。
<label>	不得包含其他的<label>元素。
<form>	不得包含其他<form>元素。

一個(gè)最小的XHTML文檔

以下示例顯示了XHTML 1.0文檔的最小內(nèi)容：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
   <head>
      <title>每個(gè)文件都必須有一個(gè)標(biāo)題-w3cschool.cn</title>
   </head>
	
   <body>
      ...你的內(nèi)容在這里——hgci.cn...
   </body>
</html>

注意：

文件類型聲明并非 XHTML 文檔自身的組成部分。它并不是 XHTML 元素，所以他可以沒有關(guān)閉標(biāo)簽。
XHTML文檔要求xmlns屬性出現(xiàn)在html標(biāo)簽中。（XHTML 文檔中沒有這個(gè)屬性，w3.org 的驗(yàn)證工具也不會(huì)提示錯(cuò)誤。因?yàn)椋?xmlns=http://www.w3.org/1999/xhtml" 是一個(gè)固定值，即使你的文檔里沒有包含它，這個(gè)值也會(huì)被自動(dòng)添加到<html> 標(biāo)簽中。）

你會(huì)在下一章《XHTML DTD三種文件類型聲明》中學(xué)到更多關(guān)于 XHTML 文檔類型聲明的知識。

以上內(nèi)容是否對您有幫助：

← XHTML 與 HTML 之間的差異

XHTML DTD三種文件類型聲明 →

寫筆記

我要補(bǔ)充